<script lang="ts" setup>
import type { loginRequest } from '@/types/api/user'
import { userApi } from '@/request/api'
import { useProfile } from '@/stores'
import {
  useConsole,
  useCurrentPage,
  useHideLoading,
  useJsonDeepParse,
  useLoading,
  useRelaunch,
  useToast,
} from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { reactive, ref } from 'vue'
import { object as zobject, string as zstring } from 'zod'

const profile = useProfile()
const userForm = reactive<loginRequest>({
  username: '',
  password: '',
  captchaKey: '',
  captcha: '',
  platform: 'channel',
  mode: 'none',
})
const codeUrl = ref<string>()

onLoad(() => {
  if (profile.isLoggedIn) {
    useRelaunch('/home/index')
  }
  getCaptCha()
})
async function getCaptCha() {
  const [err, res] = await to(userApi.captCha())
  if (err) {
    return
  }
  codeUrl.value = res.image
  userForm.captchaKey = res.captchaKey
}
async function handleSMSLogin() {
  const zparse = zobject({
    username: zstring().min(1, '用户名不能为空'),
    password: zstring().min(1, '密码不能为空'),
    captchaKey: zstring().min(1, '验证码Key不能为空'),
    captcha: zstring().min(1, '验证码不能为空'),
    platform: zstring().min(1, '平台不能为空'),
    mode: zstring().min(1, '模式不能为空'),
  }).safeParse(userForm)
  if (!zparse.success) {
    useToast(zparse.error.issues[0].message)
    return
  }

  useLoading(true)
  const [err, res] = await to(userApi.Login(userForm))
  useHideLoading()
  if (err) {
    getCaptCha()
    return
  }
  useConsole?.log('res', res)
  uni.setStorageSync('token', res.token)
  uni.setStorageSync('userInfo', JSON.stringify(res))
  const [rolesErr, rolesres] = await to(userApi.permission())
  uni.setStorageSync('permission', JSON.stringify(rolesres))
  profile.init()
  const currentPage = useCurrentPage()
  if ('from' in currentPage.query) {
    uni.reLaunch({
      url: atob(currentPage.query.from),
    })
  }
  else {
    useRelaunch('/record/index')
  }
}
</script>

<template>
  <view class="bg-body relative h-100vh safe-pb">
    <view class="h-full w-full">
      <view class="h-full w-full">
        <image class="h-full w-full" src="~@/static/loginbg.png"></image>
      </view>
    </view>
    <view class="absolute top-400px w-full p-5">
      <view class="flex flex-col justify-center bg-white">
        <view class="text-conetr b-b-1px b-b-#e0 b-b-solid py-5 p-l-5">租赁系统</view>
        <view class="w-hll flex flex-col px-5 p-b-5 p-t-3">
          <view class="b-b-1px b-b-#e0 b-b-solid">
            <input
              v-model="userForm.username"
              class="h-90px text-30px"
              type="text"
              maxlength="11"
              placeholder="输入用户名"
            >
          </view>
          <view class="mt-10px b-b-1px b-b-#e0 b-b-solid">
            <input
              v-model="userForm.password"
              class="h-90px text-30px"
              type="text"
              maxlength="11"
              placeholder="输入密码"
            >
          </view>
          <view
            class="mt-10px mt-30px flex items-center b-b-1px b-b-#e0 b-b-solid"
          >
            <input
              v-model="userForm.captcha"
              class="h-90px flex-1 text-30px"
              type="text"
              maxlength="4"
              placeholder="输入验证码"
            >
            <view @click="getCaptCha">
              <image :src="codeUrl" class="h-80px w-140px"></image>
            </view>
          </view>
          <view
            class="bg-btn mt-40px w-600px rd-full text-center text-36px text-white font-600 lh-88px active:op-85"
            @click="handleSMSLogin"
          >登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped>
.bg-body {
}

.bg-btn {
  background-color: rgba(247, 146, 13, 1);
}
</style>
